<template>
    <div class="account">
        <span :class="selectall?'active':'radio'" @click="changeSelectAll"></span><span>全选</span>
        <span>共选择 <span class="red"> {{objTotal.countTotal}}</span> 件商品</span>
        <span>合计：<span class="red">{{objTotal.priceTotal | priceFormat}}</span></span>
        <button class="account-btn">结算</button>
    </div>
</template>

<script>
    export default {
        name: "account",
        computed:{
            objTotal(){
                return this.$store.getters.accountTotal
            },
            selectall(){ //从vuex store中获取全选的状态
                return this.$store.state.selectAll
            }
        },
        methods:{
            changeSelectAll(){//单击图标，改变全选按钮的状态，同时改变所有商品的选中状态
                this.$store.commit('CHANGE_SELECTALL')
            }
        }
    }
</script>

<style scoped lang="scss">
    @import "../../assets/style.scss";
    .account{
        width: 100%;
        height: 40px;
        border-top: 1px solid #CCCCCC;
        position: fixed;
        background-color: #FFFFFF;
        bottom: 50px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        span{
            font-size: 10px;
            .red{
                font-size: 16px;
                color: red;
            }
        }
        .radio{
            display: inline-block;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            border: 2px solid #CCCCCC;
        }
        .active{
            display: inline-block;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background-color: $primary-text-color;
        }
        .account-btn{
            background-color: red;
            width: 60px;
            height: 30px;
            border-radius: 15px;
            color: #FFFFFF;
        }
    }


</style>
